<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../js/jquery-1.8.3.min.js"></script>
        <script src="../js/highcharts.js"></script>
        <script src="../js/exporting.js"></script>
        <script src="../js/oldie.js"></script>
        <script src="../js/highcharts-zh_CN.js"></script>
    </head>
    <body>
        <div id="container" style="min-width:400px;height:300px"></div>
        <script>
        	var MAX_COUNT = 60; 
        	function generateDatas(){
        		var temp = [];
        		for (var i = 0; i < MAX_COUNT ; i++) {
        			temp.push('-');
       			}
        		return temp;
        	}
	        var chart = Highcharts.chart('container', {
	                chart: {
	                    zoomType: 'x'
	                },
	                title: {
	                    text: 'CPU利用率实时监测图'
	                },
	                credits: {
	                    enabled: false
	                },
	                subtitle: {
	                    text: document.ontouchstart === undefined ?
	                    '鼠标拖动可以进行缩放' : '手势操作进行缩放'
	                },
	                xAxis: {
	                    type: 'datetime',
	                    tickInterval: 3,
	                    tickWidth: 0,
	                    gridLineWidth: 1,
	                    labels: {
	        				enabled: false
	        			}
	                },
	                tooltip: {
	                    dateTimeLabelFormats: {
	                        millisecond: '%H:%M:%S.%L',
	                        second: '%H:%M:%S',
	                        minute: '%H:%M',
	                        hour: '%H:%M',
	                        day: '%Y-%m-%d',
	                        week: '%m-%d',
	                        month: '%Y-%m',
	                        year: '%Y'
	                    }
	                },
	                yAxis: {
	                    title: {
	                        text: 'CPU利用率'
	                    },
	                    tickInterval: 10,
	                    min : 0,
	                    max : 100
	                },
	                legend: {
	                    enabled: false
	                },
	                plotOptions: {
	                    area: {
	                        fillColor: {
	                            linearGradient: {
	                                x1: 0,
	                                y1: 0,
	                                x2: 0,
	                                y2: 1
	                            },
	                            stops: [
	                                [0, Highcharts.getOptions().colors[0]],
	                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
	                            ]
	                        },
	                        marker: {
	                        	enabled: false
	                        },
	                        lineWidth: 1,
	                        states: {
	                            hover: {
	                                lineWidth: 1
	                            }
	                        },
	                        threshold: null
	                    }
	                },
	                series: [{
	                    type: 'area',
	                    name: '占比',
	                    pointInterval: 1,
	                    data: generateDatas()
	                }]
	            });
	        
	        function requestData() {
        	  $.ajax({
        	    url: '/sigar/cpuInfo',
        	    success: function(point) {
        	      var series = chart.series[0],
        	      shift = series.data.length > MAX_COUNT; // 当数据点数量超过 MAX_COUNT 个，则指定删除第一个点

        	      // 新增点操作
        	      //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
        	      chart.series[0].addPoint([point.time, point.usedPercent], true, shift);

        	      // 一秒后继续调用本函数
        	      setTimeout(requestData, 1000);
        	    },
        	    cache: false
        	  });
        	}
	        
	        requestData();
        </script>
    </body>
</html>